<template>
	<div ref="SysUser">
		<el-dialog title="用户信息" width="600px" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="sysUserForm" ref="sysUserForm" :rules="formRules" label-width="100px">
				<el-form-item label="用户名" prop="uname">
					<el-input v-model="sysUserForm.uname" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="fullName">
					<el-input v-model="sysUserForm.fullName" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="roleIds">
					<el-select v-model="sysUserForm.roleIds" multiple placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in roles" :key="item.id" :label="item.roleName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="sysUserForm.phone" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="sysUserForm.email" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input type="textarea" v-model="sysUserForm.description" maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "SysUser",
		data() {
			return {
				dialogFormVisible: false,
				sysUserForm: {
					uname: "",
					fullName: "",
					roleIds: [],
					phone: "",
					email: "",
					description: ""
				},
				roles: [],
				formRules: {
					uname: [{
						required: true,
						message: "请输入用户名"
					}],
					fullName: [{
						required: true,
						message: "请输入姓名"
					}],
					roleIds: [{
						required: true,
						message: "请选择角色"
					}],
					phone: [{
						pattern: "^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$",
						message: "请输入正确的电话"
					}],
					email: [{
						type: "email",
						message: "请输入正确的邮箱"
					}]
				}
			};
		},
		methods: {
			initForm(id) {
				if (id) {
					this.sysUserForm.id = id;
					this.$api.post('/user/getById', {id:id}).then(response => {
						this.sysUserForm = response.data;
						this.dialogFormVisible = true;
					});
				} else {
					this.dialogFormVisible = true;
				}
				this.$api.post('/role/findAll').then(response => {
					this.roles = response.data;
				});
			},
			saveForm() {
				let url = '/user/add';
				if (this.sysUserForm.id) {
					url = '/user/update';
				}

				this.$refs.sysUserForm.validate(valid => {
					if (valid) {
						this.$api.post(url, this.sysUserForm).then(response => {
							if (response.success) {
								this.$message.success(response.message);
								this.dialogFormVisible = false;
								this.$parent.handleSearch();
							} else {
								this.$message.error(response.message);
							}
						});
					}
				});
			},
			afterCloseDialog() {
				this.sysUserForm = {
					uname: "",
					fullName: "",
					roleIds: [],
					phone: "",
					email: "",
					description: ""
				};
				this.$refs.sysUserForm.resetFields();
			}
		}
	};
</script>
